<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="../tools/bootstrap-3.3.7-dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="../css/base.css">
  <link rel="stylesheet" href="../css/cart.css">
</head>

<body>

  <!-- 头部 -->
  <header>
    <div class="w1200">
      <p><a href="">关于荣耀</a></p>
      <p><a href="">新闻</a></p>
      <p><a href="">荣耀官网</a></p>
      <p><a href="">会员</a></p>
      <p><a href="">企业购</a></p>
      <span><a href="">荣耀俱乐部</a></span>
      <p><a href="./index.html">首页</a></p>
      <p name="cart"><span class="iconfont icon-gouwuchekong"></span><a href="">购物车</a></p>
      <p class="last"><a href="">手机端</a>
        <a href="">
          <img class="yuyu" src="./../images/shoujiduan.png" alt=""></a>
        <span class="caret"></span>
      </p>
    </div>
  </header>
  <!-- nav -->
  <nav>
    <div class="w1200">
      <img src="https://file07.c.hihonor.com/pimages//common/images/71596708931610769517.png " alt="">
      <p>我的购物车</p>

    </div>
  </nav>

  <div class="container">
    <div class="panel panel-info ">
      <div class="panel-body bg-info">
        <div class="checkbox">
          <label>
            <input type="checkbox" value="" name="all">
            全选
            <span class="shangpin">商品</span>
            <span class="danjai">单价</span>
            <span class="shuliang">数量</span>
            <span class="zongjia">总价</span>
            <span class="caozuo">操作</span>
          </label>
        </div>
      </div>
      <div class="panel-footer">
        <ul class="cart-list">
          <li class="cart-item">
            <div class="left">
              <input type="checkbox" name="other">
            </div>
            <div class="right">
              <div class="media">
                <div class="media-left">
                  <a href="#">
                    <img class="media-object"
                      src="https://g-search3.alicdn.com/img/bao/uploaded/i4/i3/2898933862/O1CN01ExuNHp1eOq9TKoRh6_!!2898933862.jpg_580x580Q90.jpg_.webp"
                      alt="...">
                  </a>
                </div>
                <div class="media-body">
                  <h4 class="media-heading">商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述</h4>
                  <p class="er">
                    <i class="glyphicon glyphicon-yen"></i>
                    <span class="dan">￥1234.56</span>
                  </p>
                  <div class="btn-group pull-right" role="group" aria-label="...">
                    <button type="button" class="btn btn-default">-</button>
                    <button type="button" class="btn btn-default" disabled>1</button>
                    <button type="button" class="btn btn-default">+</button>
                  </div>
                  <p class="yi">
                    <i class="glyphicon glyphicon-yen"></i>
                    <span class="heji">￥1234.56</span>
                  </p>
                  <button class="del btn btn-danger">删除</button>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <footer class="hjhj">
    <div class="foot w1200 ">
      <div class="flex"></div>
      <div class="zong">
        <p>总计: <span>￥1234</span></p>
        <p>已选择 <span>2</span>件商品</p>
      </div>
      <div class="jiesuan"> 立即结算</div>
    </div>
  </footer>
  
<script src="./../tools/jquery.min.js"></script>

<script src="./../js/cart.js"></script>

</body>

</html>